<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>04-作业(v-for和v-bind的结合)</title>

    <style>
        .active
        {
            color: red;
        }
        .blue
        {
            color:  blue;
        }
    </style>
</head>
<body>
    
<div id="app">
    <ul>
        <li :class="getclass(index)" v-on:click="change(index)" v-for="(item, index) in move_list">{{index + item}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue
    (
        {
            el : "#app",
            data : 
            {
                message : '你好',
                move_list : ['星际穿越', '大话西游', '少年派', '盗梦空间', '少年的你'],
                count : 0,
            },
            methods : 
            {
                getclass : function (index)
                {
                    return {active : this.count == index, blue : this.count != index};
                },
                change : function (index)
                {
                    this.count = index;
                },
            }
        }
    )    
</script>

</body>
</html>